<template>
  <div>
    <div style="height: 510px">
      <div style="height: 500px" class="marginT10">
        <!-- 采集规则配置 -->
        <section style="width: 600px;margin: 0 auto">
          <el-form ref="section1Form" :rules="section1FormRules" :model="acquisitionRuleDTO" label-width="110px"
                   size="small">
            <el-row :gutter="20">
              <el-col :span="18" class="col">
                <el-form-item label="采集规则名称" prop="ruleName">
                  <el-input v-model="acquisitionRuleDTO.ruleName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10">
              <el-col :span="24" class="col-textarea">
                <el-form-item label="采集表达式" prop="acquisitionExpression">
                  <el-input type="textarea" v-model="acquisitionRuleDTO.acquisitionExpression"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10" :gutter="20">
              <el-col :span="18" class="col">
                <el-form-item label="数据源" prop="dbConfigId">
                  <el-select v-model="acquisitionRuleDTO.dbConfigId" placeholder="请选择数据源">
                    <el-option v-for="(item,index) in dbTypeList" :key="item.configId" :label="item.configName"
                               :value="item.configId">
                      <span style="float: left">{{ item.configName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dbTypeName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10" :gutter="20">
              <el-col :span="18" class="col">
                <el-form-item label="采集类型" prop="acquisitionType">
                  <el-select v-model="acquisitionRuleDTO.acquisitionType" placeholder="请选择采集类型">
                    <el-option v-for="(item,index) in acquisitionTypeList" :key="index" :label="item.name"
                               :disabled="action==='update'"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10" :gutter="20">
              <el-col :span="18" class="col">
                <el-form-item label="值类型" prop="valueType">
                  <el-select v-model="acquisitionRuleDTO.valueType" placeholder="请选择值类型">
                    <el-option v-for="(item,index) in dataValueTypeList" :key="index" :label="item.name"
                               :disabled="action==='update'"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10" :gutter="20">
              <el-col :span="12" class="col">
                <el-form-item label="值转换参数">
                  <el-input v-model="acquisitionRuleDTO.valueFormat"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="col">
                <label style="font-size: 10px;color: #ebb563">日期格式建议使用'yyyy-MM-dd HH:mm:ss.S'进行转换，且检查值也为该格式</label>
              </el-col>
            </el-row>
            <el-row class="marginT10">
              <el-col :span="24" class="col-textarea">
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="acquisitionRuleDTO.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </section>
      </div>
      <div style="clear: both"></div>
      <section class="floatR">
        <el-button type="primary" size="small" @click="completedHandler" v-if="action==='update'">{{actionName}}
        </el-button>
      </section>
    </div>
  </div>

</template>

<script>
  import {
    listDbType,
    listAcquisitionType,
    listDataValueType
  } from '@/api/config/index'
  import {
    getAcquisitionRule,
    addAcquisitionRule,
    updateAcquisitionRule
  } from '@/api/rule/index'

  export default {
    props: {
      executeRuleId:{
        type: Number,
        default: null
      },
      taskDTO: {
        type: Object,
        default: null
      },
      action: {
        type: String,
        default: 'update'
      }
    },
    data() {
      return {
        actionName: '修改',
        dbTypeList: [],
        acquisitionTypeList: [],
        dataValueTypeList: [],
        acquisitionRuleDTO: {
          ruleName: null,
          acquisitionExpression: "",
          dbConfigId: null,
          acquisitionType: null,
          valueType: null,
          valueFormat: null,
          remark: null
        },
        section1FormRules: {
          ruleName: [
            {required: true, message: '请输入信息', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          acquisitionExpression: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ],
          dbConfigId: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ],
          acquisitionType: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ],
          valueType: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      init() {
        listDbType().then(response => {
          this.dbTypeList = response.data;
        });
        listAcquisitionType().then(response => {
          this.acquisitionTypeList = response.data;
        });
        listDataValueType().then(response => {
          this.dataValueTypeList = response.data;
        });
        if (this.action === 'add') {
          this.actionName = '添加';
          this.taskDTO.acquisitionRuleDTO = this.acquisitionRuleDTO;
          return;
        }
        getAcquisitionRule({
          executeRuleId: this.executeRuleId
        }).then(response => {
          this.acquisitionRuleDTO = response.data;
        });
      },
      // 完成按钮点击事件
      completedHandler() {
        let checkResult = true;
        this.$refs['section1Form'].validate((valid) => {
          if (!valid) {
            checkResult = false;
          }
        });
        if (!checkResult) {
          return false;
        }
        if (this.action === 'add') {
          return true;
        } else {
          updateAcquisitionRule({
            acquisitionRuleDTO: this.acquisitionRuleDTO
          }).then(response => {
            if (response.status === 0) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.$emit("closeUpdateAcqDialogHandler");
            }
          });
        }
      }
    },
    created() {
      this.init();
    },
    computed: {},
    components: {}
  }
</script>

<style scoped>
  .col {
    height: 40px;
  }

  .col-dialog {
    height: 50px;
  }

  .col-description {
    height: 70px;
  }

  .col-textarea {
    height: 70px;
  }
</style>
